<template>
  <div class="left-top">
    <dv-border-box-13>
      <Swiper :autoPlay="true" :showIndicator="false" interval="7000" duration="500">
        <Slide v-for="(item, index) in items" :key="index">
          <title-bar :data="{name: item.name}"></title-bar>
          <div class="my-swiper">
            <img class="left-chart-box" src="../../assets/img/rank.png" alt="">
            <dv-scroll-board class="right-chart-box" :config="item.config" />
          </div>
        </Slide>
      </Swiper>
    </dv-border-box-13>
  </div>
</template>
<script>
import { Swiper, Slide } from 'vue-swiper-component'
// import getRandom from '@/assets/js/getRandom'
import { mapGetters } from 'vuex'
export default {
  name: 'LeftTop',
  components: { Swiper, Slide },
  data () {
    const icon1 = `<img class="icon" src="${require('../../assets/img/ckrijun.png')}" alt="">`
    const icon2 = `<img class="icon" src="${require('../../assets/img/cunkuan.png')}" alt="">`
    const icon3 = `<img class="icon" src="${require('../../assets/img/daikuan.png')}" alt="">`
    const icon4 = `<img class="icon" src="${require('../../assets/img/dkrijun.png')}" alt="">`
    return {
      items: [
        {
          name: '劳动竞赛总分排名',
          config: {
            waitTime: 2000,
            header: ['排名', '支行名称', '得分'],
            align: ['center', 'left', 'left'],
            columnWidth: [50, 100, 50],
            data: [
              [icon4, '大丰支行-1', '98'],
              [icon3, '庆春支行-1', '97'],
              [icon1, '涌泉支行-1', '98'],
              [icon2, '城南支行-1', '97'],
              [icon4, '城东支行-1', '98'],
              [icon1, '翠园新区支行-1', '98'],
              [icon3, '昌北支行-1', '98'],
              [icon2, '鄞州支行-1', '98'],
              [icon4, '路桥支行-1', '97'],
              [icon1, '桐庐支行-1', '98']
            ]
          }
        },
        {
          name: '季度考核总分排名',
          config: {
            waitTime: 2000,
            header: ['排名', '支行名称', '得分'],
            align: ['center', 'left', 'left'],
            columnWidth: [50, 100, 50],
            data: [
              [icon1, '大丰支行-2', '98'],
              [icon2, '庆春支行-2', '87'],
              [icon4, '涌泉支行-2', '98'],
              [icon3, '城南支行-2', '98'],
              [icon4, '城东支行-2', '87'],
              [icon2, '翠园新区支行-2', '98'],
              [icon4, '昌北支行-2', '98'],
              [icon2, '鄞州支行-2', '87'],
              [icon3, '路桥支行-2', '98'],
              [icon4, '桐庐支行-2', '98']
            ]
          }
        },
        {
          name: '无感授信率考核排名',
          config: {
            waitTime: 2000,
            header: ['排名', '支行名称', '得分'],
            align: ['center', 'left', 'left'],
            columnWidth: [50, 100, 50],
            data: [
              [icon3, '大丰支行-3', '98'],
              [icon4, '庆春支行-3', '87'],
              [icon2, '涌泉支行-3', '98'],
              [icon4, '城南支行-3', '87'],
              [icon2, '城东支行-3', '98'],
              [icon4, '翠园新区支行-3', '98'],
              [icon1, '昌北支行-3', '98'],
              [icon2, '鄞州支行-3', '87'],
              [icon4, '路桥支行-3', '98'],
              [icon3, '桐庐支行-3', '98']
            ]
          }
        },
        {
          name: '劳动竞赛总分排名',
          config: {
            waitTime: 2000,
            header: ['排名', '支行名称', '得分'],
            align: ['center', 'left', 'left'],
            columnWidth: [50, 100, 50],
            data: [
              [icon4, '大丰支行-4', '98'],
              [icon2, '庆春支行-4', '98'],
              [icon1, '涌泉支行-4', '88'],
              [icon3, '城南支行-4', '98'],
              [icon4, '城东支行-4', '98'],
              [icon2, '翠园新区支行-4', '98'],
              [icon4, '昌北支行-4', '88'],
              [icon2, '鄞州支行-4', '98'],
              [icon3, '路桥支行-4', '88'],
              [icon2, '桐庐支行-4', '98']
            ]
          }
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['getCount'])
  },
  watch: {
    getCount () {}
  }
}
</script>
<style lang="less">
  .left-top {
    overflow: hidden;
    height: 450px;
    .my-swiper {
      display: flex;
    }
    .left-chart-box {
      width: 50%;
      padding: 20px;
      animation: translate 3s linear infinite;
    }
    @keyframes translate {
      0% {
          transform: translateY(0px);
      }
      25% {
          transform: translateY(-6px);
      }
      50% {
          transform: translateY(0px);
      }

      75% {
          transform: translateY(6px);
      }
      100% {
          transform: translateY(0px);
      }
    }
    .right-chart-box {
      width: 50%;
      height: 384px;
    }
    .icon {
      margin-top: 13px;
    }
    .row-item {
      height: 38px !important;
      line-height: 38px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      color: #40FFE6;
      margin-top: 5px;
    }
    .header {
      background: none !important;
      color: #ccc;
    }
  }
</style>
